<template>
  <div>
    <a-form :model="form" layout="vertical" @submit-success="submit">
      <a-card :bordered="false">
        <a-form-item
          field="storeName"
          :rules="{ required: true, message: t['校验失败'] }"
          :label="t['门店名称']"
        >
          <a-input v-model="form.storeName" />
        </a-form-item>

        <a-form-item
          field="storeManager"
          :rules="{ required: true, message: t['校验失败'] }"
          :label="t['门店管理者']"
        >
          <a-input v-model="form.storeManager" />
        </a-form-item>

        <a-form-item
          field="telephone"
          :rules="{ required: true, message: t['校验失败'] }"
          :label="t['联系电话']"
        >
          <a-input v-model="form.telephone" />
        </a-form-item>

        <a-form-item
          v-if="!form.id"
          field="username"
          :rules="{ message: t['校验失败'], minLength: 2, maxLength: 16 }"
          :label="t['账号']"
        >
          <a-input v-model="form.username" />
        </a-form-item>

        <a-form-item
          v-if="!form.id"
          field="password"
          :rules="{ message: t['校验失败'], minLength: 6, maxLength: 16 }"
          :label="t['密码']"
        >
          <a-input-password v-model="form.password" />
        </a-form-item>

        <a-button :loading="loading" long type="primary" html-type="submit">
          {{ t["确定"] }}
        </a-button>
      </a-card>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { addStore, updateStore } from "@/api/service/store/store";

import { list } from "../data/curd";
import { form, showForm } from "../data/form";

const t = translate("公共模块");
const loading = ref(false);
const submit = async () => {
  loading.value = true;
  if (!form.value.id) {
    await addStore(form.value);
  } else {
    await updateStore(form.value);
  }
  loading.value = false;
  await list();
  showForm.value = false;
};
</script>

<style lang="scss" scoped></style>
